<!--
 * @Author: zhangweinan
 * @Date: 2022-12-14 11:55:15
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-01-09 10:15:07
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\views\roles\invitation\selectDialog\randomSelect.vue
-->
<template>
  <div>
    <div class="top_div">
      <span>抽取规则</span>
      <span v-if="formData.dataList.length == 3" class="zhihui">添加规则</span>
      <span v-else @click="addCheckRules">添加规则</span>
    </div>
    <el-form
      ref="elForm"
      :model="formData"
      size="medium"
      label-width="80px"
      label-position="left"
    >
      <el-row
        class="rules_row"
        v-for="(element, idx) in formData.dataList"
        :key="idx"
      >
        <el-col :span="24">
          <div class="rules_col_span">
            <span class="name_show">规则{{ Number(idx + 1) }}</span>
            <span
              class="check_result_show"
              v-show="checkResult[idx].name !== ''"
            >
              <svg-icon
                :icon-class="
                  checkResult[idx].loadStatus == 1
                    ? 'check_success'
                    : 'check_warning'
                "
                style="margin-right: 12px"
              /><span
                :style="{
                  color:
                    checkResult[idx].loadStatus == 1 ? '#53C318' : '#FF4D4F',
                }"
              >
                {{ checkResult[idx].loadMessage }}
              </span>
            </span>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所在地区" prop="organId">
            <area_caacader
              :orgId="element.organId"
              @getOrginId="(val) => changeArea(val, idx)"
              :multiple="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="擅长领域">
            <el-select
              v-model="element.areaExpertises"
              placeholder="请选择擅长领域"
              multiple
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in areaExpertisesOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="其他标签">
            <el-select
              v-model="element.tags"
              placeholder="请选择其他标签"
              multiple
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in tagsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-form-item
                  label="邀约人数"
                  :prop="`dataList.${idx}.inviteesNumbers`"
                  :rules="rules"
                >
                  <el-input-number
                    v-model="element.inviteesNumbers"
                    controls-position="right"
                    placeholder="请输入邀约人数"
                    clearable
                    :min="1"
                    :style="{ width: '100%' }"
                  ></el-input-number>
                </el-form-item>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-row>
                <el-form-item label-width="0" align="end">
                  <span
                    class="delecte_btn"
                    v-if="formData.dataList.length > 1"
                    @click="deletCheckRules(idx)"
                    >删除</span
                  >
                  <span v-else class="delecte_btn zhihui">删除</span>
                </el-form-item>
              </el-row></el-col
            >
          </el-row>
        </el-col>
      </el-row>
      <div class="top_div">
        <span>屏蔽条件</span>
      </div>
      <el-row class="rules_row" style="padding: 20px">
        <el-form-item label="所在单位">
          <el-select
            v-model="formData.conditions.unitNames"
            placeholder="请选择所在单位"
            multiple
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in unitNamesOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专家名称">
          <el-select
            v-model="formData.conditions.names"
            placeholder="请选择专家名称"
            multiple
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in experisesOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-checkbox v-model="formData.conditions.isUnitLimit"
          >相同单位仅限一名专家</el-checkbox
        >
      </el-row>
      <el-form-item class="fotter_btn">
        <span @click="cancelForm" class="close_btn">取消</span>
        <span @click="checkForm" class="close_btn addInvitationStyle"
          >检索</span
        >
        <span
          v-if="loadKey !== ''"
          @click="submitForm"
          class="close_btn addInvitationStyle"
          >确定</span
        >
        <span
          v-else
          class="close_btn addInvitationStyle"
          style="background: gray; border: 1px solid gray"
          >确定</span
        >
        <!-- <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="checkForm">检索</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getRandomLoadData,
  getAreaExpertise,
  getTags,
  getList,
  getLoadByKey,
} from "@/api/enterprise/invitation.js";
import area_caacader from "../../common/area_cascader.vue";
export default {
  components: { area_caacader },
  props: [],
  data() {
    return {
      formData: {
        dataList: [
          {
            organId: [], //区域
            areaExpertises: [], //擅长领域
            tags: [], //其他标签
            inviteesNumbers: "", //计划邀约人数
          },
        ],
        conditions: {
          isUnitLimit: false,
          unitNames: "",
          names: "",
        },
      },
      checkResult: [
        {
          loadStatus: 1,
          loadMessage: "",
          name: "",
        },
      ], //检索出是否符合要求的结果
      loadKey: "",
      rules: {
        required: true,
        message: "请选择邀约人数",
        trigger: "change",
      },
      areaExpertisesOptions: [],
      tagsOptions: [],
      experisesOptions: [],
      unitNamesOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    //获取领域字典数据
    this.getAreaExpertise();
    //获取标签字典数据
    this.getTags();
    //获取专家列表字典数据及所在单位
    this.getexperises();
  },
  mounted() {},
  methods: {
    getAreaExpertise() {
      getAreaExpertise().then((response) => {
        let { data } = response;
        this.areaExpertisesOptions = data.map((item) => {
          let obj = {};
          obj.value = item;
          obj.label = item;
          return obj;
        });
      });
    },
    getTags() {
      getTags().then((response) => {
        let { data } = response;
        this.tagsOptions = data.map((item) => {
          let obj = {};
          obj.value = item;
          obj.label = item;
          return obj;
        });
      });
    },
    getexperises() {
      getList().then((response) => {
        let { data } = response;
        let experisesOptions = data.map((item) => item.name);
        let unitNamesOptions = data.map((item) => item.unitName);
        this.experisesOptions = [...new Set(experisesOptions)].map((item) => {
          let obj = {};
          obj.value = item;
          obj.label = item;
          return obj;
        });
        this.unitNamesOptions = [
          ...new Set(
            unitNamesOptions.filter((item) => item !== null && item !== "")
          ),
        ].map((item) => {
          let obj = {};
          obj.value = item;
          obj.label = item;
          return obj;
        });
      });
    },
    getRandomLoadData() {
      this.loadKey = "";
      let conditions = { ...this.formData.conditions };
      conditions.unitNames =
        conditions.unitNames.length > 0 ? conditions.unitNames.join(",") : "";
      conditions.names =
        conditions.names.length > 0 ? conditions.names.join(",") : "";
      let params = {
        conditions,
        rules: this.formData.dataList.map((item, indx) => {
          let obj = {};
          obj.organIds =
            item.organId.length > 0
              ? item.organId.map((it) => it[it.length - 1]).join(",")
              : "";
          obj.areaExpertises =
            item.areaExpertises.length > 0 ? item.areaExpertises.join(",") : "";
          obj.tags = item.tags.length > 0 ? item.tags.join(",") : "";
          obj.name = `规则${Number(indx + 1)}`;
          obj.inviteesNumbers = item.inviteesNumbers;
          return obj;
        }),
      };
      getRandomLoadData(params).then((res) => {
        let { loadKey, loadResultVoList } = res.data;
        this.checkResult = loadResultVoList;
        this.loadKey = loadKey;
        localStorage.setItem("loadKey", loadKey);
      });
    },
    changeArea(val, index) {
      this.formData.dataList[index].organId = val;
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        if (this.checkResult[0].name == "") {
          //表示没有进行检索就确认了
          this.$emit("getResultTableData", {
            resultTableData: [],
            inviteesNumbers: 0,
            total: 0,
          });
          this.$emit("cancel");
        } else {
          getLoadByKey(this.loadKey).then((res) => {
            this.resetForm();
            this.$emit("cancel");
            let { data } = res;
            this.$emit("getResultTableData", {
              resultTableData: data.expertList,
              inviteesNumbers: data.inviteesNumbers,
              total: data.total,
            });
          });
        }
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
      this.formData = {
        dataList: [
          {
            organId: [], //区域
            areaExpertises: [], //擅长领域
            tags: [], //其他标签
            inviteesNumbers: "", //计划邀约人数
          },
        ],
        conditions: {
          isUnitLimit: false,
          unitNames: "",
          names: "",
        },
      };
      this.checkResult = [
        {
          loadStatus: 1,
          loadMessage: "",
          name: "",
        },
      ];
      this.loadKey = "";
    },
    //检索事件
    checkForm() {
      this.getRandomLoadData();
    },
    //取消事件
    cancelForm() {
      this.resetForm();
      this.$emit("cancel");
    },
    //添加规则
    addCheckRules() {
      let obj = {
        organId: [],
        areaExpertises: [],
        tags: [],
        inviteesNumbers: "",
      };
      let checkObj = {
        loadStatus: 1,
        loadMessage: "",
        name: "",
      };
      this.formData.dataList.push(obj);
      this.checkResult.push(checkObj);
    },
    //删除规则
    deletCheckRules(index) {
      this.formData.dataList.splice(index, 1);
      this.checkResult.splice(index, 1);
      console.log("AA:", this.formData.dataList);
    },
  },
};
</script>
<style lang="scss" scoped>
.top_div {
  clear: both;
  height: 40px;
  span {
    font-size: 16px;
    letter-spacing: normal;
    display: inline-block;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;

    &:nth-child(1) {
      float: left;
      color: #494a4e;
      font-weight: 700;
      padding: 5px 0;
    }
    &:nth-child(2) {
      float: right;
      cursor: pointer;
      width: 82px;
      line-height: 32px;
      text-align: center;
      border-radius: 3px;
      font-size: 14px;
      font-weight: 500;
      background: #4877ee;
      border: 1px solid #4877ee;
      color: #ffffff;
    }
  }
}
.rules_row {
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  margin-bottom: 30px;
  padding: 0px 20px;
  padding-top: 10px;
  .rules_col_span {
    display: flex;
    height: 30px;
    margin-bottom: 10px;
    .name_show {
      padding: 5px 10px;
      width: 80px;
      font-size: 16px;
    }
    .check_result_show {
      flex: 1;
      line-height: 30px;
    }
  }
}
.fotter_btn {
  padding-top: 20px;
  text-align: end;
  // border-top: 1px solid #b5b5b5;
}
.addInvitationStyle {
  color: #ffffff;
  background: #4877ee;
  margin-left: 16px;
}
::v-deep label {
  font-weight: normal;
}
.zhihui {
  background-color: #aaaaaa !important;
  border-color: #aaaaaa !important;
}
</style>
<style>
.close_btn {
  display: inline-block;
  cursor: pointer;
  width: 82px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 3px;
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #4877ee;
  border: 1px solid #4877ee;
}
.delecte_btn {
  display: inline-block;
  cursor: pointer;
  width: 82px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 3px;
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  background: #f37f76;
  border: 1px solid #f37f76;
  color: #ffffff;
}
</style>
